<template>
  <div class="content_page">
    <div class="content_page_box flex_between" @click="changename">
      <div class="title" :style="{ fontSize: globalFont == 'small_font' ? '24rpx' :globalFont == 'small-medium'? '28rpx':'32rpx' }">昵称</div>
      <div class="flex_center">
        <div  :style="{ fontSize: globalFont == 'small_font' ? '22rpx' :globalFont == 'small-medium'? '26rpx':'30rpx' }"> {{ myInfo.nickname }}</div>
        <image
          src="/static/myInfo/icon_arrow.png"
          style="width: 24rpx; height: 24rpx; margin-left: 10rpx"
        ></image>
      </div>
    </div>
    <div class="content_page_box flex_between" @click="bindPhone">
      <div class="title" :style="{ fontSize: globalFont == 'small_font' ? '24rpx' :globalFont == 'small-medium'? '28rpx':'32rpx' }">绑定手机号</div>
      <div v-if="myInfo.phoneNumber" :style="{ fontSize: globalFont == 'small_font' ? '22rpx' :globalFont == 'small-medium'? '26rpx':'30rpx' }">{{ myInfo.phoneNumber }}</div>
      <div v-else class="bindphone" :style="{ fontSize: globalFont == 'small_font' ? '22rpx' :globalFont == 'small-medium'? '26rpx':'30rpx' }">点击授权</div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { onShow } from "@dcloudio/uni-app";
import { ref ,getCurrentInstance} from "vue";
import { personInfoFn,editInfo } from "@/api/myInfo/myInfo.ts";
import type { personInfo, resInfo } from "@/api/myInfo/typs.ts";
import { baseUrl } from "@/utils/status.ts";
const myInfo = ref<personInfo>({
  nickname: "",
  avatar: "",
  phoneNumber: "",
});
const getData = () => {
  personInfoFn()
    .then((res: resInfo) => {
      if (res.resultStatus) {
        myInfo.value = res.resultData;
      } else {
        uni.showToast({
          title: res.errorMessage,
          icon: "none",
        });
      }
    })
    .catch((err: any) => {
      uni.showToast({
        title: "服务器异常",
        icon: "none",
      });
    });
};
// 去修改nickname
const changename = () => {
  uni.navigateTo({
    url: `/pages/settingInfo/changename?nickname=${myInfo.value.nickname}`,
  });
};
// 去绑定手机号
const bindPhone = () => {
  if (myInfo.value.phoneNumber) {
    return;
  }
  uni.navigateTo({
    url: `/pages/settingInfo/bindphone/index`,
  });
};
const instance = getCurrentInstance();
const appStorage = instance?.appContext.config.globalProperties.appStorage;
const globalFont = ref()
onShow(() => {
  const userInfo_key = appStorage.getObj("userInfo_key");
	globalFont.value = userInfo_key.smallFont
  getData();
});
</script>
<style lang="scss" scoped>
:root {
  /* 默认字号 */
  --font-size-small: 26rpx;
  /* 中号字号 */
  --font-size-medium: 32rpx;
    /* 大号字号 */
  --font-size-large: 40rpx;
}

.small_font {
  font-size: var(--font-size-small);
}

.small-medium {
  font-size: var(--font-size-medium);
}

.small-large {
  font-size: var(--font-size-large);
}
.content_page {
  background-color: #fff;
  padding: 0 32rpx;
  &_box {
    padding: 28rpx 0;
    border-bottom: 2rpx solid #eee;
    .title {
      // font-size: 28rpx;
      color: #333;
      font-weight: bold;
    }
    image {
      width: 64rpx;
      height: 64rpx;
      border-radius: 50%;
    }
    .bindphone {
      // font-size: 30rpx;
      color: #006d56;
    }
  }
}
.avatar-wrapper {
  width: 72rpx;
  height: 72rpx;
  padding: 0;
  border-radius: 50%;
  border: 0;
  border: none;
  background: #ffffff;
  margin: 0;
}
.avatar-wrapper::after {
  border: none;
}
</style>
